{% extends 'ApplicationToolsBundle::layout.html.twig' %}

{% block title %}typography{% endblock %}

{% block body %}

    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Title</h4>
					<h1>H1 Header. Lorem ipsum dolor amet</h1>
					<h2>H2 Header. Lorem ipsum dolor amet</h2>
					<h3>H3 Header. Lorem ipsum dolor amet</h3>
					<h4>H4 Header. Lorem ipsum dolor amet</h5>
					<h5>H5 Header. Lorem ipsum dolor amet</h5>
					<h6>H6 Header. Lorem ipsum dolor amet</h6>
				</div>
			</div>
		</div>

    </div>
    <div class="clear"></div>

    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Paragraphs</h4>
					<p>Suspendisse consectetur massa at massa fermentum faucibus. Quisque orci purus, lobortis eu elementum sed, hendrerit vitae nisi. Curabitur ccumstan arcu eu sem vehicula id faucibus tortor condimentum. Suspendisse lectus nunc, tempor eget dictum vitae, porta vitae elit. Nullam gratvida auctor cidunt Proin ullamcorper metus sit amet magna laoreet eu suscipit nisi egestas. Morbi id massa id urna ultricies mattis eget in nibh.</p>
					<p>Nam sit amet lectus diam. Sed eu ligula hendrerit mauris sollicitudin sodales non a elit. Pellentesque laoreet, sapien quis imperdiet bibendum, nunc dui consequat justo, at sollicitudin tellus dolor nec magna. Morbi accumsan interdum sapien et bibendum duis eleifend fringilla tincidunt.</p>
				</div>
			</div>
		</div>
        
    </div>
    <div class="clear"></div>
	
    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Blockquotes</h4>
					
					<div class="box">
						<h2>
							<a href="#" id="toggle-blockquote">Blockquote</a>
						</h2>
						<div class="block" id="blockquote">
							<blockquote>
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
								<p class="cite">
									<cite>John Smith</cite>
								</p>
							</blockquote>
						</div>
					</div>
					
				</div>
			</div>
		</div>
        
    </div>
    <div class="clear"></div>
	
    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Dropcaps</h4>
					<p>Suspendisse consectetur massa at massa fermentum faucibus. Quisque orci purus, lobortis eu elementum sed, hendrerit vitae nisi. Curabitur ccumstan arcu eu sem vehicula id faucibus tortor condimentum. Suspendisse lectus nunc, tempor eget dictum vitae, porta vitae elit. Nullam gratvida auctor cidunt Proin ullamcorper metus sit amet magna laoreet eu suscipit nisi egestas. Morbi id massa id urna ultricies mattis eget in nibh.</p>
					<p>Nam sit amet lectus diam. Sed eu ligula hendrerit mauris sollicitudin sodales non a elit. Pellentesque laoreet, sapien quis imperdiet bibendum, nunc dui consequat justo, at sollicitudin tellus dolor nec magna. Morbi accumsan interdum sapien et bibendum duis eleifend fringilla tincidunt.</p>
				</div>
			</div>
		</div>
        
    </div>
    <div class="clear"></div>

    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Custom List</h4>
				</div>
			</div>
			<div class="row">
				<div class="col_3">
					<h5>A menu</h5>
					<ul class="menu">
						<li>
							<a href="#">Item 1</a>
						</li>
						<li>
							<a href="#">Item 2</a>
						</li>
						<li>
							<a href="#">Item 3</a>
						</li>
					</ul>
				</div>
				<div class="col_3">
					<h5>An unordered list</h5>
					<ul>
						<li>
							<a href="#">Item 1</a>
						</li>
						<li>
							<a href="#">Item 2</a>
						</li>
						<li>
							<a href="#">Item 3</a>
						</li>
					</ul>
				</div>
				<div class="col_3">
					<h5>An ordered list</h5>
					<ol>
						<li>
							<a href="#">Item 1</a>
						</li>
						<li>
							<a href="#">Item 2</a>
						</li>
						<li>
							<a href="#">Item 3</a>
						</li>
					</ol>
				</div>
			</div>
		</div>
        
    </div>
    <div class="clear"></div>
	
    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Promo Text</h4>
				</div>
			</div>
		</div>
        
    </div>
    <div class="clear"></div>
	
    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Divider</h4>
					<hr/>
				</div>
			</div>
		</div>
        
    </div>
    <div class="clear"></div>
	
    <div class="grid_16">

		<div class="container">
			<div class="row">
				<div class="col_1">
					<h4>Tables</h4>
					

					<div class="block" id="tables">
						<table>
							<tr>
								<th>Lorem ipsum</th>
								<td>Dolor sit</td>
								<td class="currency">$125.00</td>
							</tr>
							<tr>
								<th>Dolor sit</th>
								<td>Nostrud exerci</td>
								<td class="currency">$75.00</td>
							</tr>
							<tr>
								<th>Nostrud exerci</th>
								<td>Lorem ipsum</td>
								<td class="currency">$200.00</td>
							</tr>
							<tr>
								<th>Lorem ipsum</th>
								<td>Dolor sit</td>
								<td class="currency">$64.00</td>
							</tr>
							<tr>
								<th>Dolor sit</th>
								<td>Nostrud exerci</td>
								<td class="currency">$36.00</td>
							</tr>
						</table>
						<table summary="This table includes examples of as many table elements as possible">
							<caption>An example table</caption>
							<colgroup>
								<col class="colA" />
								<col class="colB" />
								<col class="colC" />
							</colgroup>
							<thead>
								<tr>
									<th colspan="3" class="table-head">Table heading</th>
								</tr>
								<tr>
									<th>Column 1</th>
									<th>Column 2</th>
									<th class="currency">Column 3</th>
								</tr>
							</thead>
							<tfoot>
								<tr>
									<th>Subtotal</th>
									<td></td>
									<th class="currency">$500.00</th>
								</tr>
								<tr class="total">
									<th>Total</th>
									<td></td>
									<th class="currency">$500.00</th>
								</tr>
							</tfoot>
							<tbody>
								<tr class="odd">
									<th>Lorem ipsum</th>
									<td>Dolor sit</td>
									<td class="currency">$125.00</td>
								</tr>
								<tr>
									<th>Dolor sit</th>
									<td>Nostrud exerci</td>
									<td class="currency">$75.00</td>
								</tr>
								<tr class="odd">
									<th>Nostrud exerci</th>
									<td>Lorem ipsum</td>
									<td class="currency">$200.00</td>
								</tr>
								<tr>
									<th>Lorem ipsum</th>
									<td>Dolor sit</td>
									<td class="currency">$64.00</td>
								</tr>
								<tr class="odd">
									<th>Dolor sit</th>
									<td>Nostrud exerci</td>
									<td class="currency">$36.00</td>
								</tr>
							</tbody>
						</table>
					</div>

					
				</div>
			</div>
		</div>
        
    </div>
    <div class="clear"></div>


{% endblock %}